<script lang="ts">
  import { onMount } from 'svelte';
  import { invoke } from '@tauri-apps/api/core';
  import { Calendar, ArrowRight, X } from 'lucide-svelte';
  
  export let show = false;
  export let onConvert: () => void = () => {};
  export let onDismiss: () => void = () => {};
  
  let weekRange = '';
  
  onMount(async () => {
    if (show) {
      try {
        weekRange = await invoke<string>('get_week_range');
      } catch (error) {
        console.error('获取周范围失败:', error);
      }
    }
  });
</script>

{#if show}
  <div class="fixed top-4 right-4 max-w-sm bg-white border border-blue-200 rounded-lg shadow-lg p-4 z-50">
    <div class="flex items-start justify-between mb-2">
      <div class="flex items-center gap-2">
        <Calendar class="w-5 h-5 text-blue-600" />
        <h3 class="font-medium text-gray-900">周末提醒</h3>
      </div>
      <button 
        onclick={onDismiss}
        class="text-gray-400 hover:text-gray-600 transition-colors"
      >
        <X class="w-4 h-4" />
      </button>
    </div>
    
    <p class="text-sm text-gray-700 mb-3">
      今天是周末，建议将明日工作计划转换为下周工作计划（{weekRange}），这样更符合实际工作安排。
    </p>
    
    <div class="flex gap-2">
      <button
        onclick={onConvert}
        class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors flex items-center gap-1"
      >
        <ArrowRight class="w-3 h-3" />
        转换
      </button>
      <button
        onclick={onDismiss}
        class="px-3 py-1.5 text-gray-600 hover:text-gray-800 text-sm transition-colors"
      >
        稍后
      </button>
    </div>
  </div>
{/if}